<template>
    <view :style="{ direction: $t('dir') }" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <navbar :title="$t('shezhemima')" bgLayer="linear-gradient(#fff, #fff)" navbarBg="linear-gradient(#fff, #fff)" />
        <view class="main text-center pt-xl">
            <view class="pt-xl">
                <view class="dir-ltr center pa-sm row items-center" style="background: #f9f9f9; border-radius: 68rpx; width: 76%; margin: 0 auto">
                    <view class="mx-sm">
                        <u-icon name="phone-fill" size="40rpx" color="#a5a4a4" />
                    </view>
                    <input type="number" v-model="phone" maxlength="11" shape="circle" border="none" :placeholder="$t('plechold_phone')" clearable placeholderStyle="text-align:center !important;font-size:24rpx;color:#8a989d" :customStyle="{ textAlign: 'center !important', letterSpacing: '4rpx' }" color="grey" fontSize="36rpx" @input="changePhone" />

                    <!-- <input type="number" v-model="phone" maxlength="11" shape="circle" border="none" :placeholder="$t('plechold_phone')" clearable placeholderStyle="text-align:center !important;font-size:28rpx;color:#8a989d" :customStyle="{ textAlign: 'center !important', letterSpacing: phone.length > 0 ? '4rpx' : '' }" color="grey" fontSize="36rpx" @change="changePhone" /> -->
                    <button :disabled="disabled" class="code-button" @click="handleButtonClick">
                        <text>{{ countDown > 0 ? `(${countDown}s)` : '' }}</text>
                        <text class="px-xs" :class="countDown > 0 ? '' : 'mx-sm'">{{ $t('send') }}</text>
                    </button>
                </view>

                <view class="text-gray mt-lg mb-xs"> {{ $t('plechold_Captcha') }} </view>
                <view class="dir-ltr ltr pa-sm d-flex flex-center" style="background: #f9f9f9; border-radius: 68rpx; width: 76%; margin: 0 auto">
                    <verify-code-input :maxLength="codeLength" @change="handleCodeChange" />
                </view>

                <view class="dir-ltr center pa-sm row items-center" style="background: #f9f9f9; border-radius: 68rpx; width: 76%; margin: 70rpx auto; border: 1px solid #f2f2f2; padding-top: 26rpx; padding-bottom: 24rpx">
                    <view class="mx-md">
                        <u-icon :name="pwdShow ? 'eye-off' : 'eye-fill'" size="40rpx" color="#a5a4a4" @tap="pwdShow = !pwdShow" />
                    </view>

                    <input v-if="pwdShow" type="text" v-model="password" :placeholder="$t('qingshurumima')" style="flex: 1" maxlength="20" shape="circle" border="none" clearable placeholderStyle="text-align:center !important;font-size:28rpx;color:#8a989d;letterSpacing: 0rpx" :customStyle="{ textAlign: 'center !important', letterSpacing: '2rpx', fontSize: '36rpx', color: 'grey' }" />
                    <input v-else :password="true" type="password" v-model="password" :placeholder="$t('qingshurumima')" style="flex: 1" maxlength="20" shape="circle" border="none" clearable placeholderStyle="text-align:center !important;font-size:28rpx;color:#8a989d;letterSpacing: 0rpx" :customStyle="{ textAlign: 'center !important', letterSpacing: '2rpx', fontSize: '36rpx', color: 'grey' }" />
                </view>

                <view class="dir-ltr center pa-sm row items-center" style="background: #f9f9f9; border-radius: 68rpx; width: 76%; margin: 0 auto; border: 1px solid #f2f2f2; padding-top: 26rpx; padding-bottom: 24rpx">
                    <view class="mx-md">
                        <u-icon :name="rePwdShow ? 'eye-off' : 'eye-fill'" size="40rpx" color="#a5a4a4" @tap="rePwdShow = !rePwdShow" />
                    </view>
                    <input v-if="rePwdShow" type="text" v-model="rePassword" :placeholder="$t('zaicishurumima')" style="flex: 1" maxlength="20" shape="circle" border="none" clearable placeholderStyle="text-align:center !important;font-size:28rpx;color:#8a989d;letterSpacing: 0rpx" :customStyle="{ textAlign: 'center !important', letterSpacing: '2rpx', fontSize: '36rpx', color: 'grey' }" />
                    <input v-else :password="true" type="password" v-model="rePassword" :placeholder="$t('zaicishurumima')" style="flex: 1" maxlength="20" shape="circle" border="none" clearable placeholderStyle="text-align:center !important;font-size:28rpx;color:#8a989d;letterSpacing: 0rpx" :customStyle="{ textAlign: 'center !important', letterSpacing: '2rpx', fontSize: '36rpx', color: 'grey' }" />
                </view>

                <view class="text-white d-inline-block app-bg login-button mt-xl fs-xl" @click="forgetPwdFun">{{ $t('confirm') }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'forgetPwd',
    data() {
        return {
            disabled: true,
            phone: '',
            password: '',
            rePassword: '',
            timer: null,
            countDown: 0,
            buttonTimeout: 60,
            codeLength: 6,
            pwdShow: false,
            rePwdShow: false,
        }
    },
    onLoad() {},
    methods: {
        // 输入手机号
        changePhone(e) {
            let val = e.detail.value
            if (val.length == 11) this.disabled = false
            else this.disabled = true
        },
        handleCodeChange(code) {
            // 验证码输入框的值发生变化
            this.code = code
        },
        // 检查手机号格式
        checkMobileNum(phone) {
            let reg = /^(\+86)?(1[3-9][0-9])[0-9]{8}$/
            if (reg.test(phone)) {
                console.log('手机号格式正确')
                return true
            }
            // '手机号格式不正确'
            else return false
        },
        handleButtonClick() {
            if (!this.phone || !this.checkMobileNum(this.phone)) {
                uni.showToast({
                    title: this.$t('pleaseEnterAValidMobilePhoneNumber'),
                    icon: 'none',
                    duration: 2000,
                })
                return
            }
            if (this.countDown > 0) return

            this._userSendcode()
        },

        // 获取验证码
        async _userSendcode() {
            uni.showLoading({
                title: '',
            })
            await this.$uniapi(
                '/getMobileCode',
                {
                    mobile: this.phone,
                },
                'post'
            )
                .then((res) => {
                    uni.hideLoading()
                    if (res.code == 0) {
                        this.countDown = this.buttonTimeout
                        this.disabled = true

                        this.timer = setInterval(() => {
                            if (this.countDown > 0) {
                                this.countDown--
                            } else {
                                clearInterval(this.timer)
                                this.disabled = false
                            }
                        }, 1000)
                        this.$emit('get-verify-code')
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 2000,
                        })
                    }
                })
                .catch((err) => {
                    uni.hideLoading()
                    uni.showToast({
                        title: err.errMsg,
                        duration: 2000,
                        icon: 'none',
                    })
                })
        },

        async forgetPwdFun() {
            let { phone, code, password, rePassword } = this
            if (!phone) {
                uni.showToast({
                    icon: 'none',
                    title: this.$t('plechold_phone'),
                })
                return
            }
            if (!code) {
                uni.showToast({
                    icon: 'none',
                    title: this.$t('plechold_Captcha'),
                })
                return
            }
            if (!password) {
                uni.showToast({
                    icon: 'none',
                    title: this.$t('qingshurumima'),
                })
                return
            }
            if (!rePassword) {
                uni.showToast({
                    icon: 'none',
                    title: this.$t('zaicishurumima'),
                })
                return
            }
            if (password != rePassword) {
                uni.showToast({
                    icon: 'none',
                    title: this.$t('liangcimimashurubuyizhi'),
                })
                return
            }
            let data = {
                mobile: phone,
                code: code,
                password: password,
                re_password: rePassword,
            }
            await this.$uniapi('/createPassword', data, 'post').then((res) => {
                if (res.code == 0) {
                    this.showPwd = false
                    uni.showToast({
                        title: '',
                        icon: 'success',
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000,
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss">
.code-button {
    /* width: 100rpx; */
    height: 60rpx;
    font-size: 28rpx;
    color: var(--app-color);
    background-color: #fff;
    border: none;
    border-radius: 40rpx;
    text-align: center;
    line-height: 60rpx;
    cursor: pointer;
    outline: none;
    letter-spacing: normal;
    /* padding: 0 !important; */
    direction: rtl;
}

.code-button::after,
.login-button::after {
    border: none !important;
}

.login-button {
    color: #fff;
    border: none;
    border-radius: 40rpx;
    text-align: center;
    line-height: 60rpx;
    cursor: pointer;
    outline: none;
    letter-spacing: normal;
    direction: rtl;
    border-radius: 48rpx;
    padding: 12rpx 80rpx;
}
</style>
